{% extends 'base.html' %}

{% block title %}银行放贷指标查询系统 - 仪表盘{% endblock %}

{% block page_title %}仪表盘{% endblock %}
{% block page_subtitle %}放贷指标概览{% endblock %}

{% block content %}
<!-- 顶部信息卡片 -->
<div class="row">
  <div class="col-lg-3 col-xs-6">
    <!-- small box -->
    <div class="small-box bg-aqua">
      <div class="inner">
        <h3>{{ enterprise_count }}</h3>
        <p>企业总数</p>
      </div>
      <div class="icon">
        <i class="ion ion-building"></i>
      </div>
      <a href="#" class="small-box-footer">更多信息 <i class="fa fa-arrow-circle-right"></i></a>
    </div>
  </div>
  <!-- ./col -->
  <div class="col-lg-3 col-xs-6">
    <!-- small box -->
    <div class="small-box bg-green">
      <div class="inner">
        <h3>{{ enterprise_types_count }}</h3>
        <p>信誉公司数</p>
      </div>
      <div class="icon">
        <i class="ion ion-stats-bars"></i>
      </div>
      <a href="#" class="small-box-footer">更多信息 <i class="fa fa-arrow-circle-right"></i></a>
    </div>
  </div>
  <!-- ./col -->
  <div class="col-lg-3 col-xs-6">
    <!-- small box -->
    <div class="small-box bg-yellow">
      <div class="inner">
        <h3>{{ high_risk_count }}</h3>
        <p>高风险企业数</p>
      </div>
      <div class="icon">
        <i class="ion ion-alert-circled"></i>
      </div>
      <a href="#" class="small-box-footer">更多信息 <i class="fa fa-arrow-circle-right"></i></a>
    </div>
  </div>
  <!-- ./col -->
  <div class="col-lg-3 col-xs-6">
    <!-- small box -->
    <div class="small-box bg-red">
      <div class="inner">
        <h3>{{ lawsuit_count }}</h3>
        <p>涉诉企业数</p>
      </div>
      <div class="icon">
        <i class="ion ion-hammer"></i>
      </div>
      <a href="#" class="small-box-footer">更多信息 <i class="fa fa-arrow-circle-right"></i></a>
    </div>
  </div>
  <!-- ./col -->
</div>
<!-- /.row -->

<!-- 主要图表区域 -->
<div class="row">
  <div class="col-md-8">
    <!-- 企业风险趋势图 -->
    <div class="box box-primary">
      <div class="box-header with-border">
        <h3 class="box-title">企业风险趋势分析</h3>
        <div class="box-tools pull-right">
          <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
        </div>
      </div>
      <div class="box-body">
        <div class="chart">
          <canvas id="riskTrendChart" style="height:250px"></canvas>
        </div>
      </div>
    </div>
    <!-- /.box -->

    <!-- 企业成立时间分布 -->
    <div class="box box-success">
      <div class="box-header with-border">
        <h3 class="box-title">企业成立时间分布</h3>
        <div class="box-tools pull-right">
          <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
        </div>
      </div>
      <div class="box-body">
        <div class="chart">
          <canvas id="establishmentDateChart" style="height:250px"></canvas>
        </div>
      </div>
    </div>
    <!-- /.box -->
  </div>
  <!-- /.col -->

  <div class="col-md-4">
    <!-- 风险指标统计 -->
    <div class="box box-danger">
      <div class="box-header with-border">
        <h3 class="box-title">风险指标统计</h3>
        <div class="box-tools pull-right">
          <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
        </div>
      </div>
      <div class="box-body">
        <canvas id="riskIndicatorsChart" style="height:250px"></canvas>
      </div>
    </div>
    <!-- /.box -->

    <!-- 涉案金额分布 -->
    <div class="box box-info">
      <div class="box-header with-border">
        <h3 class="box-title">涉案金额分布</h3>
        <div class="box-tools pull-right">
          <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
        </div>
      </div>
      <div class="box-body">
        <canvas id="caseAmountChart" style="height:250px"></canvas>
      </div>
    </div>
    <!-- /.box -->
  </div>
  <!-- /.col -->
</div>
<!-- /.row -->

{% endblock %}

{% block extra_js %}
<script>
  $(function () {
    // 企业风险趋势图
    var riskTrendCtx = document.getElementById('riskTrendChart').getContext('2d');
    var riskTrendChart = new Chart(riskTrendCtx, {
      type: 'line',
      data: {
        labels: ['近1年', '近2年', '近3年'],
        datasets: [{
          label: '立案次数',
          data: {{ risk_trend_filing|safe }},
          fill: false,
          borderColor: '#f39c12',
          tension: 0.1
        },
        {
          label: '执行次数',
          data: {{ risk_trend_execution|safe }},
          fill: false,
          borderColor: '#dd4b39',
          tension: 0.1
        },
        {
          label: '裁判次数',
          data: {{ risk_trend_judgment|safe }},
          fill: false,
          borderColor: '#00c0ef',
          tension: 0.1
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });

    // 企业成立时间分布图
    var establishmentDateCtx = document.getElementById('establishmentDateChart').getContext('2d');
    var establishmentDateChart = new Chart(establishmentDateCtx, {
      type: 'line',
      data: {
        labels: {{ establishment_years|safe }},
        datasets: [{
          label: '企业数量',
          data: {{ establishment_counts|safe }},
          fill: false,
          borderColor: '#00a65a',
          tension: 0.1
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false
      }
    });

    // 风险指标统计图
    var riskIndicatorsCtx = document.getElementById('riskIndicatorsChart').getContext('2d');
    var riskIndicatorsChart = new Chart(riskIndicatorsCtx, {
      type: 'doughnut',
      data: {
        labels: ['立案风险', '执行风险', '裁判风险'],
        datasets: [{
          data: {{ risk_indicators|safe }},
          backgroundColor: [
            'rgba(243, 156, 18, 0.7)',
            'rgba(221, 75, 57, 0.7)',
            'rgba(0, 192, 239, 0.7)'
          ],
          borderColor: [
            'rgba(243, 156, 18, 1)',
            'rgba(221, 75, 57, 1)',
            'rgba(0, 192, 239, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false
      }
    });

    // 涉案金额分布图
    var caseAmountCtx = document.getElementById('caseAmountChart').getContext('2d');
    var caseAmountChart = new Chart(caseAmountCtx, {
      type: 'radar',
      data: {
        labels: ['近1年', '近2年', '近3年'],
        datasets: [{
          label: '平均涉案金额(万元)',
          data: {{ case_amounts|safe }},
          fill: true,
          backgroundColor: 'rgba(60, 141, 188, 0.2)',
          borderColor: 'rgba(60, 141, 188, 1)',
          pointBackgroundColor: 'rgba(60, 141, 188, 1)',
          pointBorderColor: '#fff',
          pointHoverBackgroundColor: '#fff',
          pointHoverBorderColor: 'rgba(60, 141, 188, 1)'
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false
      }
    });
  });
</script>
{% endblock %}